<template>
	<container
		class="good-detail"
		:isNoData="isNodata"
		:isLoading="loading&&goodInfo.commodityId!=='undefined'"
		@btnClick="init"
		:nodataOption="{
			type: 'hasbtn',
			iconBottom: '40rpx',
			text: '无数据',
			btnText: '刷新'
		}"
		:has-login="showLoginView"
		:login-view-option="{
			icon: '../../static/logo.png',
			iconW: '150rpx',
			iconH: '150rpx',
			iconBottom: '40rpx',
			name: '金品教育网上书城'
		}"
	>
		<mescroll-body
			ref="mescrollRef"
			@init="mescrollInit"
			:down="{
				auto: false,
				bgColor: '#fff'
			}"
			:up="{
				auto: false,
				use: false
			}"
			@down="downLoad"
		>
			<view class="good-baseinfo">
				<swiper indicator-dots circular autoplay interval="2500" @change="swiperChange" @click="imgPreview">
					<swiper-item v-for="item in imgPreViews" :key="item"><image class="img" :src="imgHost + item" mode=""></image></swiper-item>
				</swiper>
				<!-- <image class="img" :src="imgHost + goodInfo.commodityPic" mode=""></image> -->

				<view class="text-infos">
					<text class="title">{{ goodInfo.commodityName }}</text>
					<view class="prices">
						<text class="price">¥{{ goodInfo.sellPrice }}</text>
						<text class="orgprice">¥{{ goodInfo.marketPrice }}</text>
						<share-btn v-if="isLogin"><image class="share-btn" src="../../static/fenxiang.png" mode=""></image></share-btn>
						<image v-else class="share-btn" src="../../static/fenxiang.png" @click="showLoginView = true" mode=""></image>
					</view>
					<text class="sign" v-if="goodInfo.freeMailStatus">免运费</text>
				</view>
			</view>
			<view class="good-otherinfo">
				<view class="item title">商品信息</view>
				<uniForms class="form">
					<formListItem
						class="formitem"
						:label-width="150"
						:read-only="true"
						:label="'商品条码'"
						placeholder="未填写"
						:input-text-align="'right'"
						:value="goodInfo.commodityCode"
					></formListItem>
					<formListItem
						class="formitem"
						:label-width="150"
						:read-only="true"
						:label="'出版社'"
						placeholder="未填写"
						:input-text-align="'right'"
						:value="goodInfo.press"
					></formListItem>
					<formListItem
						class="formitem"
						:label-width="150"
						:read-only="true"
						:label="'出版日期'"
						placeholder="未填写"
						:input-text-align="'right'"
						:value="goodInfo.pressDate"
					></formListItem>
					<formListItem
						class="formitem"
						:label-width="150"
						:read-only="true"
						:label="'作者'"
						placeholder="未填写"
						:input-text-align="'right'"
						:value="goodInfo.author"
					></formListItem>
				</uniForms>
			</view>
			<!-- <view class="introduction">
			<view class="title">内容简介</view>
			<rich-text class="content" :nodes="'哈啊啊啊啊啊啊'"></rich-text>
		</view> -->
			<view class="tools">
				<icon-text
					class="catr-btn"
					:badge-num="catrGoodNum"
					:icon-type="'img'"
					:name="''"
					:icon-nol="'/static/gouwuche.png'"
					:icon-size="50"
					:icon-margin-bottom="5"
					:name-size="0"
					:name-color="'#7E8191'"
					@click="goToCatr"
				></icon-text>
				<view class="btn-group">
					<button class="btn btn-yellow" @click="addCatr">加入购物车</button>
					<button class="btn btn-orange" @click="goToBuy">马上购买</button>
				</view>
			</view>
		</mescroll-body>
	</container>
</template>

<script>
import MescrollMixin from '@/components/mescroll-uni/mescroll-mixins.js';
import container from '@/components/container/container.vue';
import iconText from '@/components/icon-text/icon-text.vue';
import uniForms from '@/components/uni-forms/uni-forms.vue';
import formListItem from '@/components/form-list-item/form-list-item.vue';
import shareBtn from '@/components/share-btn/share-btn.vue';
export default {
	mixins: [MescrollMixin],
	components: {
		container,
		iconText,
		uniForms,
		formListItem,
		shareBtn
	},
	data() {
		return {
			showLoginView: false, //显示登录页
			loading: false,
			imgHost: this.$imgHost,
			id: '', //id
			name: '', //名字
			actPreViewIndex: 0,
			goodInfo: {
				// author: "十万个为什么 上册"
				// categoryId: 19
				// commodityCode: "100100100"
				// commodityId: 8
				// commodityName: "十万个为什么 上册"
				// commodityPic: "/profile/upload/afb37c4f-68ae-4411-9c47-b47a5353aa4d.jpg"
				// commodityRotationPic: "/profile/upload/eb0964ac-bb95-4439-8555-be233b96e3d6.jpg,/profile/upload/8600a944-2745-484f-82e8-5f99d2f98c62.jpg"
				// createBy: ""
				// createTime: "2021-01-08 07:23:40"
				// freeMailStatus: 0
				// marketPrice: 100
				// orderNum: 0
				// params: {}
				// postage: null
				// press: "十万个为什么 上册"
				// pressDate: "2021-01-12"
				// remark: ""
				// searchValue: null
				// sellPrice: 100
				// status: 1
				// stock: 100
				// updateBy: ""
				// updateTime: null
			}
			// imgPreViews: [
			// 	// 预览图片组
			// ]
		};
	},
	computed: {
		isLogin() {
			return (
				this.$store.state.loginModule.token && this.$store.state.loginModule.token != '' && this.$store.state.loginModule.phone && this.$store.state.loginModule.phone != ''
			);
		},
		isNodata() {
			return this.goodInfo.commodityId != undefined && this.goodInfo.commodityId != null ? false : true;
		},
		imgPreViews() {
			if (this.goodInfo.commodityRotationPic) return this.goodInfo.commodityRotationPic.split(',');
		},
		catrGoodList() {
			// 购物车商品列表
			return this.$store.state.catrModule.goodList;
		},
		catrGoodNum() {
			// 购物车商品数量

			let result = 0;
			if(this.catrGoodList&&this.catrGoodList.length>0)
			this.catrGoodList.forEach(item => {
				if(item.count!=undefined&&item.count!=null)
				result = result + item.count;
			});

			return result;
		}
	},
	watch: {
		isLogin: function(newVal, oldVal) {
			this.showLoginView = !newVal;
		}
	},
	methods: {
		init() {
			this.loading = true;
			this.getGoodDetail()
				.then(res => {
					this.loading = false;
				})
				.catch(err => {
					this.loading = false;
				});
		},
		swiperChange(event) {
			console.log('swiperChange', event);
			this.actPreViewIndex = event.detail.current;
		},
		imgPreview() {
			uni.previewImage({
				urls: this.imgPreViews.map(item => {
					return this.imgHost + item;
				}),
				current: this.actPreViewIndex,
				loop: true
			});
		},
		downLoad() {
			console.log('onPullDownRefresh');
			this.getGoodDetail()
				.then(res => {
					this.mescroll.endSuccess();
				})
				.catch(err => {
					this.mescroll.endErr();
				});
		},
		getGoodDetail() {
			// 获取商品详细信息
			return this.$store.dispatch('getGoodDetail', { id: this.id }).then(res => {
				console.log('商品详细信息', res);
				let data = res.data.data;
				this.goodInfo = data;
			});
		},
		addCatr() {
			// 添加购物车
			console.log('添加购物车开始');
			if (this.isLogin) {
				this.$store
					.dispatch('userAddCatr', {
						goodsId: parseInt(this.id),
						commodityPic: this.goodInfo.commodityPic,
						marketPrice: this.goodInfo.marketPrice,
						sellPrice: this.goodInfo.sellPrice,
						postage: this.goodInfo.postage,
						count: 1
					})
					.then(res => {
						console.log('添加购物车成功', res);
					})
					.catch(err => {
						console.log('添加购物车失败', err);
					});
			} else this.showLoginView = true;
		},
		goToCatr() {
			// 去购物车
			console.log('去购物车');
			if (this.isLogin) {
				uni.switchTab({
					url: '/pages/main/catr'
				});
			} else this.showLoginView = true;
		},
		goToBuy() {
			// 马上购买
			if (this.isLogin) {
				this.$store.commit('setBuyGoods', [{ ...this.goodInfo, buyCount: 1 }]);
				uni.navigateTo({
					url: `/pages/order/order-place?id=${this.id}&type=good`
				});
			} else this.showLoginView = true;
		},
		swiperChange(event) {
			// 改变
			console.log('event', event);
		}
	},
	onLoad(option) {
		if (option.id) this.id = option.id;
		if (option.name) this.name = option.name;
		uni.setNavigationBarTitle({
			title: `商品详情-${option.name}`
		});
		this.init();
	}
};
</script>

<style lang="scss" scoped>
.good-detail {
	margin-bottom: 120rpx;
	.good-baseinfo {
		padding: 10rpx 0rpx 10rpx 0rpx;
		background-color: #fff;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		margin-bottom: 20rpx;

		swiper {
			// width: 750rpx;
			width: 670rpx;
			height: 871rpx;

			.img {
				width: 100%;
				height: 100%;
			}
		}

		.text-infos {
			display: flex;
			justify-content: flex-start;
			flex-direction: column;
			width: 100%;
			box-sizing: border-box;
			padding: 24rpx 36rpx 10rpx 36rpx;

			.title {
				color: #2c2c34;
				font-size: 30rpx;
				font-weight: bolder;
			}
			.prices {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-top: 16rpx;
				.price {
					font-size: 32rpx;
					color: #ff6106;
				}
				.orgprice {
					font-size: 32rpx;
					color: #e1dfe1;
					text-decoration: line-through;
				}
				.share-btn {
					width: 36rpx;
					height: 40rpx;
				}
			}
			.sign {
				color: #8c8e9c;
				font-size: 32rpx;
				margin-top: 16rpx;
			}
		}
	}
	.good-otherinfo {
		background-color: #fff;
		margin-bottom: 20rpx;
		.item {
			padding: 16rpx 36rpx 16rpx 36rpx;
		}
		.item:nth-last-child(n + 2) {
			border-bottom: 2rpx solid #f3f5fb;
		}
		.title {
			color: #2c2c34;
			font-size: 33rpx;
			font-weight: bolder;
		}
		.form {
			padding: 0;
			::v-deep.uni-forms {
				padding: 0;
			}
			.formitem {
				display: block;
				width: 100%;
				box-sizing: border-box;
				padding: 0rpx 36rpx 0rpx 36rpx;
			}
			.formitem:nth-last-child(n + 2) {
				border-bottom: 2rpx solid #f3f5fb;
			}
		}
	}
	.introduction {
		background-color: #fff;
		padding: 16rpx 36rpx 16rpx 36rpx;
		margin-bottom: 10rpx;
		.title {
			color: #2c2c34;
			font-size: 33rpx;
			font-weight: bolder;
			margin-bottom: 20rpx;
		}
		.content {
		}
	}
	.tools {
		width: 100%;
		height: 108rpx;
		box-sizing: border-box;
		padding: 20rpx 30rpx;
		position: fixed;
		bottom: 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: #fff;
		box-shadow: 0px 0px 8rpx #333;
		.catr-btn {
			position: relative;
			top: 8rpx;
		}
		.btn-group {
			.btn {
				padding: 14rpx 40rpx;
			}
			.btn:nth-last-child(n + 2) {
				margin-right: 20rpx;
			}
		}
	}
}
</style>
